<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第三天 数据驱动视图</title>
	<style type="text/css">
		.success{
			background-color: green;
		}
		.error{
			background-color: red;
		}
	</style>
</head>
<body>
	<div id='app'></div>
	<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		//插槽 标签<slot>按钮</slot>  父组件向子组件传值   带：的属性名后面传递的是一个参数  不带：的属性名传递的是一个字符串
		Vue.component('App',{
			template:`<div>
						<BtnV type='success'>成功</BtnV> 
					  	<BtnV type='error'>失败</BtnV>
					  </div>`
		});

		Vue.component('BtnV',{
			template:`<button :class='type'>
						<slot>按钮</slot>
					  </button>`,
			props:['type']
		});


		new Vue({
			el:'#app',
			template:`<App/>`
		})
	</script>
</body>
</html>
